<script setup lang="ts" name="beginnerGuide">
  import { queryNewbieGuideTitleDetail } from '/@/apis/userApi';
  import { useRequest } from 'vue-request';
  import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
  const { query } = useRoute();
  const guidesData = ref(<any>{});
  onMounted(() => {
    useRequest(queryNewbieGuideTitleDetail, {
      defaultParams: [query.id],
      onSuccess(data: any) {
        guidesData.value = data;
      },
    });
  });
</script>
<template>
  <div class="beginnerGuideDetail">
    <AppBar class="app_bar" back :primary="true" :title="$t('BeginnerGuide')" />
    <div class="content" v-html="guidesData.content"></div>
  </div>
</template>
<style lang="scss" scoped>
.beginnerGuideDetail {
  min-height: 100vh;
  .content {
    padding: 20px 30px;
    overflow: auto;
  }
}
</style>
<style lang="scss">
.beginnerGuideDetail {
  img {
      width: auto;
      height: auto;
    }
}
</style>